<template>
  <div>
    <h1>分类列表</h1>
    <div class="typeList">
       <Jie title="图片">
        <img src="./assets/03.gif" style="width:100%" alt="nb"/>
       </Jie>
       <Jie title="音乐">
        <ul>
          <li>等你下课</li>
          <li>放学别走</li>
        </ul>
       </Jie>
       <Jie title="视频">
        <img src="./assets/03.gif" style="width:100%" alt="nb"/>
       </Jie>
    </div>
  </div>
</template>

<script>
import Jie from '@/components/Jie'
export default {
  name: "App",
  components: {
    Jie
  },
  data() {
    return {
      itemData:[
        { id: "001",
         content: ["火锅", "烧烤", "螺蛳粉"],
          title: "美食" 
        },
        {
          id: "002",
          content: ["等你下课", "放学别走", "操场上见"],
          title: "音乐",
        },
        { id: "003",
         content: ["CF", "DNF", "CS"],
          title: "游戏" 
        },
      ]
    }
  },
};
</script>

<style scoped>
.typeList{
  display: flex;
  justify-content: space-around;
}
</style>
